<template>
  <div class="HomeContainer">
    <div class="head">
      <HomeHeader></HomeHeader>
    </div>
    <div class="main">
      <Search></Search>
      <UserTitleCon></UserTitleCon>
      <div class="fenshu">
        <ImageBox
          src="https://join-blogs-pic.oss-cn-beijing.aliyuncs.com/yx/202311191612013.png"
        ></ImageBox>
      </div>
      <div class="yuceRes">
        <div>
          <span>{{ pre.cong }}</span
          ><span>可冲击</span>
          <span> > </span>
          <!-- <Icon type="icon-xitongfanhui"></Icon> -->
        </div>
        <div>
          <span>{{ pre.wen }}</span
          ><span>较稳妥</span>
          <span> > </span>
          <!-- <Icon type="icon-xitongfanhui"></Icon> -->
        </div>
        <div>
          <span>{{ pre.bao }}</span
          ><span>可保底</span>
          <span> > </span>
          <!-- <Icon type="icon-xitongfanhui"></Icon> -->
        </div>
      </div>
      <div class="yuceAc">
        <div class="ai_yuce">
          <div class="left">
            <Icon type="icon-zizhishenpi"></Icon>
          </div>
          <router-link to="/volunteer">
            <div class="right">
              <div class="title">智能选志愿</div>
              <div class="subTitle">输入分数一键选志愿</div>
            </div>
          </router-link>
        </div>
        <router-link to="/volunteer">
          <div class="ai_yuce">
            <div class="left">
              <Icon type="icon-List"></Icon>
            </div>
            <div class="right">
              <div class="title">我的预测结果</div>
              <div class="subTitle">定制多种报考方案</div>
            </div>
          </div>
        </router-link>
      </div>
      <div class="navList">
        <div class="gonggao">
          <span>公告</span>
          <marquee behavior="scroll" direction="left"
            >这是一条的公告内环路跨境电商防护服</marquee
          >
        </div>
        <div class="navBody">
          <div class="item">
            <router-link to="/school">
              <Icon type="icon-daxueziyuan"></Icon>
              <span>查大学</span>
            </router-link>
          </div>
          <div class="item">
            <router-link to="/major">
              <Icon type="icon-shuben"></Icon>
              <span>查专业</span>
            </router-link>
          </div>
          <div class="item">
            <router-link to="/search">
              <Icon type="icon-pinggu"></Icon>
              <span>省控线</span>
            </router-link>
          </div>
          <div class="item">
            <router-link to="/school">
              <Icon type="icon-keliuyuce"></Icon>
              <span>测概率</span>
            </router-link>
          </div>
          <!-- <div class="item">
            <router-link to="/school">
              <Icon type="icon-shouye"></Icon>
              <span>查大学</span>
            </router-link>
          </div>
          <div class="item">
            <router-link to="/school">
              <Icon type="icon-shouye"></Icon>
              <span>查大学</span>
            </router-link>
          </div> -->
        </div>
        <div id="timeline">
          <div class="dot" id="one">
            <span></span>
            <section>6月7日</section>
            <i>高考日程</i>
          </div>
          <div class="dot" id="two">
            <span></span>
            <section>6月23日</section>
            <i>高考查分</i>
          </div>
          <div class="dot" id="three">
            <span></span>
            <section>6月23日</section>
            <i>志愿填报</i>
          </div>
          <div class="dot" id="four">
            <span></span>
            <section>7月16日</section>
            <i>录取查询</i>
          </div>
        </div>
        <div class="linkWeb">
          <div class="con">
            <a
              href="http://www.jleea.edu.cn/?uc_biz_str=OPT%3AW_ENTER_ANI%401%7COPT%3ATOOLBAR_STYLE%401%7COPT%3AS_BAR_BG_COLOR%40FFFFFF%7COPT%3ABACK_BTN_STYLE%400"
            >
              <img
                src="https://join-blogs-pic.oss-cn-beijing.aliyuncs.com/yx/202312132144578.png"
                alt=""
              />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HomeHeader from "@/components/Header.vue";
import Search from "@/components/Search.vue";
import UserTitleCon from "@/components/UserTitle.vue";
import ImageBox from "@/components/ImageBox.vue";
import Icon from "@/components/Icon.vue";
import { Predictive } from "@/api/allApi";
export default {
  name: "homeComponent",
  components: {
    HomeHeader,
    Icon,
    Search,
    UserTitleCon,
    ImageBox,
  },
  data() {
    return {
      pre: {
        cong: 6,
        wen: 6,
        bao: 303,
        congList: [
          {
            collegeName: "北京工商大学嘉华学院",
            bxxz: "民办",
            ranks: "本科批",
            type: "财经类",
            tags: [],
            majors: [
              {
                info: "金融学",
                min: 390,
                precedence: 17426,
                resultTag: "稳",
              },
              {
                info: "会计学",
                min: 367,
                precedence: 19977,
                resultTag: "稳",
              },
              {
                info: "大数据管理与应用",
                min: 337,
                precedence: 52076,
                resultTag: "稳",
              },
              {
                info: "会计学",
                min: 302,
                precedence: 58518,
                resultTag: "稳",
              },
              {
                info: "金融学",
                min: 298,
                precedence: 59143,
                resultTag: "稳",
              },
            ],
            resultTag: "冲",
            recScore: "0.34",
          },
          {
            collegeName: "北京邮电大学",
            bxxz: "公办",
            ranks: "本科批",
            type: "理工类",
            tags: [
              {
                tagId: 3,
                tagName: "双一流",
              },
              {
                tagId: 2,
                tagName: "211",
              },
              {
                tagId: 4,
                tagName: "教育部直属",
              },
            ],
            majors: [
              {
                info: "机械工程（机器人试验班）（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 617,
                precedence: 1371,
                resultTag: "冲",
              },
              {
                info: "计算机类（计算机科学与技术、网络工程、数据科学与大数据技术2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 621,
                precedence: 1210,
                resultTag: "冲",
              },
              {
                info: "数字媒体技术（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 611,
                precedence: 1655,
                resultTag: "冲",
              },
              {
                info: "理科试验班（信息科学）（数学与应用数学、信息与计算科学、应用物理学2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 611,
                precedence: 1655,
                resultTag: "冲",
              },
              {
                info: "人工智能（大类招生）（包含：信息工程、人工智能、自动化专业。2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 613,
                precedence: 1541,
                resultTag: "冲",
              },
              {
                info: "网络空间安全（大类招生）（包含：网络空间安全、信息安全专业。2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 613,
                precedence: 1541,
                resultTag: "冲",
              },
              {
                info: "通信工程（大类招生）（包含：电子信息工程、通信工程专业。2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 615,
                precedence: 1445,
                resultTag: "冲",
              },
              {
                info: "电子信息类（电子信息科学与技术、电子科学与技术、光电信息科学与工程2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定）",
                min: 617,
                precedence: 1371,
                resultTag: "冲",
              },
              {
                info: "电子商务及法律（宏福校区）（中外合作办学）（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定。本专业部分课程采用英语授课，建议非英语考生慎重报考）",
                min: 564,
                precedence: 5358,
                resultTag: "稳",
              },
              {
                info: "电信工程及管理（宏福校区）（中外合作办学）（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定。本专业部分课程采用英语授课，建议非英语考生慎重报考）",
                min: 570,
                precedence: 4719,
                resultTag: "保",
              },
              {
                info: "物联网工程（宏福校区）（中外合作办学）（2021级学生一、二、三年级教学安排在沙河校区，各专业四年级教学安排地点将根据学校规划安排确定。本专业部分课程采用英语授课，建议非英语考生慎重报考）",
                min: 574,
                precedence: 4299,
                resultTag: "保",
              },
            ],
            resultTag: "冲",
            recScore: "0.35",
          },
          {
            collegeName: "山东职业学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "理工类",
            tags: [
              {
                tagId: 6,
                tagName: "双高计划",
              },
            ],
            majors: [
              {
                info: "动车组检修技术",
                min: 301,
                precedence: 58669,
                resultTag: "稳",
              },
              {
                info: "高速铁路综合维修技术",
                min: 281,
                precedence: 61546,
                resultTag: "稳",
              },
              {
                info: "铁道机车运用与维护",
                min: 275,
                precedence: 62306,
                resultTag: "稳",
              },
            ],
            resultTag: "冲",
            recScore: "0.38",
          },
          {
            collegeName: "河北交通职业技术学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "理工类",
            tags: [],
            majors: [
              {
                info: "电子信息类（电子信息工程技术、物联网应用技术、集成电路技术）",
                min: 236,
                precedence: 27859,
                resultTag: "稳",
              },
              {
                info: "计算机类（软件技术、大数据技术、信息安全技术应用、智能交通技术）",
                min: 272,
                precedence: 62643,
                resultTag: "稳",
              },
            ],
            resultTag: "冲",
            recScore: "0.48",
          },
          {
            collegeName: "重庆信息技术职业学院",
            bxxz: "民办",
            ranks: "专科批",
            type: "理工类",
            tags: [],
            majors: [],
            resultTag: "冲",
            recScore: "0.49",
          },
          {
            collegeName: "武汉航海职业技术学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "综合类",
            tags: [],
            majors: [],
            resultTag: "冲",
            recScore: "0.49",
          },
          {
            collegeName: "河北司法警官职业学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "政法类",
            tags: [],
            majors: [],
            resultTag: "冲",
            recScore: "0.5",
          },
          {
            collegeName: "四川工业科技学院",
            bxxz: "民办",
            ranks: "本科批",
            type: "综合类",
            tags: [],
            majors: [],
            resultTag: "冲",
            recScore: "0.5",
          },
        ],
        wenList: [
          {
            collegeName: "铜仁学院",
            bxxz: "公办",
            ranks: "本科批",
            type: "综合类",
            tags: [],
            majors: [],
            resultTag: "稳",
            recScore: "0.63",
          },
          {
            collegeName: "成都中医药大学",
            bxxz: "公办",
            ranks: "本科批",
            type: "医药类",
            tags: [
              {
                tagId: 3,
                tagName: "双一流",
              },
            ],
            majors: [
              {
                info: "中医学（学制5年）（不予录取色弱、色盲考生）",
                min: 523,
                precedence: 10723,
                resultTag: "稳",
              },
              {
                info: "医学信息工程（不予录取色弱、色盲考生）",
                min: 460,
                precedence: 22834,
                resultTag: "稳",
              },
              {
                info: "护理学（不予录取色弱、色盲考生；女生身高不低于1.58米，男生身高不低于1.62米）",
                min: 456,
                precedence: 23733,
                resultTag: "稳",
              },
            ],
            resultTag: "稳",
            recScore: "0.64",
          },
          {
            collegeName: "陕西航空职业技术学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "理工类",
            tags: [],
            majors: [],
            resultTag: "稳",
            recScore: "0.77",
          },
          {
            collegeName: "南阳医学高等专科学校",
            bxxz: "公办",
            ranks: "专科批",
            type: "医药类",
            tags: [],
            majors: [
              {
                info: "口腔医学",
                min: 375,
                precedence: 19097,
                resultTag: "稳",
              },
              {
                info: "中医学",
                min: 368,
                precedence: 19869,
                resultTag: "稳",
              },
              {
                info: "临床医学",
                min: 303,
                precedence: 58365,
                resultTag: "稳",
              },
              {
                info: "口腔医学",
                min: 302,
                precedence: 58518,
                resultTag: "稳",
              },
            ],
            resultTag: "稳",
            recScore: "0.78",
          },
          {
            collegeName: "四川化工职业技术学院",
            bxxz: "公办",
            ranks: "专科批",
            type: "理工类",
            tags: [],
            majors: [],
            resultTag: "稳",
            recScore: "0.79",
          },
        ],
        baoList: [
          {
            collegeName: "广西民族大学",
            bxxz: "公办",
            ranks: "本科批",
            type: "民族类",
            tags: [],
            majors: [
              {
                info: "公共管理类（行政管理、城市管理）",
                min: 490,
                precedence: 6019,
                resultTag: "稳",
              },
              {
                info: "计算机类（计算机科学与技术、软件工程、网络工程）",
                min: 437,
                precedence: 28196,
                resultTag: "稳",
              },
              {
                info: "电子信息类（电子信息工程、通信工程、自动化）",
                min: 430,
                precedence: 29898,
                resultTag: "稳",
              },
              {
                info: "法学",
                min: 493,
                precedence: 5738,
                resultTag: "稳",
              },
              {
                info: "生物技术（要求无色盲色弱）",
                min: 422,
                precedence: 31856,
                resultTag: "稳",
              },
            ],
            resultTag: "保",
            recScore: "0.84",
          },
          {
            collegeName: "沈阳大学",
            bxxz: "公办",
            ranks: "本科批",
            type: "综合类",
            tags: [],
            majors: [
              {
                info: "工业工程（中外合作办学）（部分课程英语授课）",
                min: 382,
                precedence: 41791,
                resultTag: "稳",
              },
              {
                info: "会计学",
                min: 515,
                precedence: 3877,
                resultTag: "稳",
              },
              {
                info: "自动化（中外合作办学）（部分课程英语授课）",
                min: 391,
                precedence: 39569,
                resultTag: "稳",
              },
              {
                info: "焊接技术与工程",
                min: 444,
                precedence: 26533,
                resultTag: "稳",
              },
              {
                info: "交通运输",
                min: 446,
                precedence: 26043,
                resultTag: "稳",
              },
              {
                info: "车辆工程",
                min: 447,
                precedence: 25800,
                resultTag: "稳",
              },
            ],
            resultTag: "保",
            recScore: "0.88",
          },
          {
            collegeName: "烟台理工学院",
            bxxz: "民办",
            ranks: "本科批",
            type: "综合类",
            tags: [],
            majors: [
              {
                info: "机器人工程",
                min: 318,
                precedence: 55796,
                resultTag: "稳",
              },
              {
                info: "通信工程",
                min: 320,
                precedence: 55441,
                resultTag: "稳",
              },
              {
                info: "电子信息科学与技术",
                min: 341,
                precedence: 51210,
                resultTag: "稳",
              },
              {
                info: "汉语言文学",
                min: 371,
                precedence: 19553,
                resultTag: "稳",
              },
              {
                info: "市场营销",
                min: 409,
                precedence: 15261,
                resultTag: "稳",
              },
              {
                info: "投资学",
                min: 417,
                precedence: 14295,
                resultTag: "稳",
              },
            ],
            resultTag: "保",
            recScore: "0.9",
          },
        ],
      },
    };
  },
  async mounted() {
    // let useData = JSON.parse(localStorage.getItem("useData"));
    // let predit = JSON.parse(localStorage.getItem("predit"));
    // // console.log(useData);
    // if (useData && !predit) {
    //   let res = await Predictive({ score: this.usrData.score });
    //   console.log(res.data);
    //   window.localStorage.setItem("predit", JSON.stringify(res.data));
    // }
    // let temp=JSON.parse(localStorage.getItem("predit"))
    // if (temp) {
    //   this.pre=temp
    // }
  },
  // mounted() {
  //   (function (doc, win) {
  //     var docEl = doc.documentElement;
  //     var resizeEvt =
  //       "orientationchange" in window ? "orientationchange" : "resize";
  //     var recalc = function () {
  //       var clientWidth = docEl.clientWidth;
  //       if (!clientWidth) return;
  //       docEl.style.fontSize = (clientWidth / 375) * 16 + "px"; // 根据设计稿宽度调整
  //     };
  //     if (!doc.addEventListener) return;
  //     win.addEventListener(resizeEvt, recalc, false);
  //     doc.addEventListener("DOMContentLoaded", recalc, false);
  //   })(document, window);
  // },
};
</script>

<style lang="less" scoped>
.HomeContainer {
  overflow: auto;
  height: 100%;
}
.head {
  margin: 10px;
  padding: 10px 20px;
}
.yuceRes {
  padding: 5px 20px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
  div {
    span {
      &:nth-child(1) {
        letter-spacing: 0px;
        padding-right: 3px;
      }
    }
  }
}

.yuceAc {
  // padding: 10px 20px;
  display: flex;
  justify-content: space-around;
  .ai_yuce {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 20px;
    color: #fff;
    background-color: #2e71ee;
    border-radius: 10px;
    font-family: "楷体";
    .left {
      font-size: 20px;
      padding: 0px 5px;
    }
    .right {
      .title {
        font-size: 14px;
        margin-bottom: 5px;
      }
      .subTitle {
        font-size: 10px;
        color: #dfdddd;
      }
    }
  }
}
.fenshu {
  padding: 5px 5px;
}
.navList {
  margin-top: 20px;
  background-color: #fff;
  padding: 10px 20px;
  // height: 100px;
  border-radius: 20px 20px 0 0;
  .gonggao {
    margin: 5px 0;
    display: flex;
    align-items: center;
    background-color: #eff6fa;
    padding: 5px 5px;
    border-radius: 8px;
    span {
      width: 30px;
      padding: 2px 0;
      text-align: center;
      border-radius: 5px;
      font-size: 12px;
      background-color: #2e71ee;
      color: #fff;
    }
    marquee {
      font-size: 12px;
    }
  }
}
.navBody {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  // grid-template-areas:
  //   ". . . . ."
  //   ". . . . .";
  width: 100%;
  // height: 800px;
  .item a {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    span {
      font-size: 12px;
    }
  }
}
div#timeline {
  background-color: lighten(#2980b9, 20%);
  margin-top: 40px;
  height: 5px;
  width: 100%;
  position: relative;
  //box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;

  .dot {
    //box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;
    z-index: 999;
    transition: 0.3s ease-in-out;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    text-align: center;
    cursor: pointer;
    &:nth-child(1) {
      left: 12.5%;
      background-color: #2c3e50;
    }
    &:nth-child(2) {
      left: 37.5%;
      background-color: #e74c3c;
    }
    &:nth-child(3) {
      left: 62.5%;
      background-color: #7b3;
    }
    &:nth-child(4) {
      left: 87.5%;
      background-color: darken(#2980b9, 10%);
    }
    &:hover {
      transform: scale(1.2);
    }
    section {
      font-family: roboto;
      width: 50px;
      font-size: 10px;
      display: block;
      position: relative;
      top: -0px;
      text-align: center;
      transform: translateX(-20px);
      color: #a3a3a3;
    }
    span {
      display: inline-block;
      top: -5px;
      width: 15px;
      height: 15px;
      background-color: rgba(255, 255, 255, 0.4);
      position: relative;
      border-radius: 50%;
      transform: translateX(-2.5px);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
      z-index: 99;
    }
    i {
      display: inline-block;
      position: absolute;
      font-size: 12px;
      width: 50px;
      top: -20px;
      left: -20px;
      color: #6a96e7;
      font-weight: 700;
    }
  }
}
.linkWeb {
  margin-top: 40px;
  width: 100%;
  .con {
    img {
      width: 100%;
    }
  }
}
</style>